<template>
    <el-container class="admin-container" :class="{'editor-fullscreen-active': isFullscreenActive}">
        <el-aside :width='$store.state.menuWidth' class="fixed-aside">
            <AdminMenu></AdminMenu>
        </el-aside>

        <el-container class="right-container" :style="{ marginLeft: $store.state.menuWidth }">
            <el-header class="fixed-header">
                <AdminHeader></AdminHeader>
            </el-header>

            <el-main>
                <!-- 删除此处的AdminTagList组件，或者在路由中合理条件渲染 -->
                <!-- <AdminTagList></AdminTagList> -->
                <router-view v-slot="{ Component }">
                    <Transition name="fade">
                        <keep-alive :max="10">
                            <component :is="Component"></component>
                        </keep-alive>
                    </Transition>
                </router-view>
            </el-main>

            <el-footer class="admin-footer">
                <AdminFooter></AdminFooter>
            </el-footer>
        </el-container>
    </el-container>
</template>

<script setup>
import AdminHeader from '@/layouts/components/AdminHeader.vue';
import AdminMenu from '@/layouts/components/AdminMenu.vue';
import AdminTagList from '@/layouts/components/AdminTagList.vue';
import AdminFooter from '@/layouts/components/AdminFooter.vue';
import { ref, onMounted, onUnmounted, provide } from 'vue';

// Track fullscreen editor state
const isFullscreenActive = ref(false);

// Provide the state and setter for child components
provide('isFullscreenActive', isFullscreenActive);

// Listen for custom event from editor dialog
const handleFullscreenChange = (event) => {
    if (event.detail && event.detail.isActive !== undefined) {
        isFullscreenActive.value = event.detail.isActive;
    }
};

onMounted(() => {
    window.addEventListener('editor-fullscreen-change', handleFullscreenChange);
});

onUnmounted(() => {
    window.removeEventListener('editor-fullscreen-change', handleFullscreenChange);
});
</script>

<style scoped>
.admin-container {
    min-height: 100vh;
    position: relative;
}

.fixed-aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.fixed-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.right-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f7fa;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

.right-container::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/image/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.85;
    z-index: -2;
}

.right-container::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(244, 244, 244, 0.75);
    z-index: -1;
}

.el-main {
    flex: 1;
    padding: 16px;
    margin-top: 10px;
}

/* 为所有管理页面添加适当的上边距 */
:deep(.content-container) {
    margin-top: 20px; /* 通用上边距，确保所有页面内容与顶部保持一致的距离 */
}

.admin-footer {
    padding: 0 !important;
    height: auto !important;
}

.el-footer {
    padding: 0!important;
}

.fade-enter-from {
    opacity: 0;
}

.fade-enter-to {
    opacity: 1;
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
}

.fade-leave-active {
    transition: all 0.3s;
}

.fade-enter-active {
    transition: all 0.3s;
    transition-delay: 0.3s;
}

/* Hide sidebar when editor is in fullscreen mode */
.editor-fullscreen-active .fixed-aside {
    display: none !important;
}

.editor-fullscreen-active .right-container {
    margin-left: 0 !important;
}
</style>